import QtQuick 1.0
import Qt.labs.components.native 1.0
import com.nokia.symbian 1.0
import "../js/DatabaseEngine.js" as DB

Rectangle {
    id: addRecepieView
    width: 800
    height: 600

    property int horizontalMargin: width/40
    property int verticalMargin: height/40

    Button{
        id: closeButton
        onClicked: addRecepieView.visible = false;
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 5
        anchors.rightMargin: 5
        text: "X"
    }

    Rectangle{
        id: basicInfoRect
        height: childrenRect.height
        Text {
            id: nameText
            anchors.top: parent.top
            anchors.topMargin: verticalMargin
            anchors.left: parent.left
            anchors.leftMargin: horizontalMargin
            color: "#333333"
            text: qsTr("Name:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 19
        }

        TextField {
            id: nameTextField
            anchors.verticalCenter: nameText.verticalCenter
            anchors.left: nameText.right
            anchors.leftMargin: 111
            width: 180
            height: 24
            anchors.verticalCenterOffset: 0
            KeyNavigation.tab: cookingTimeTextField
            KeyNavigation.down: cookingTimeTextField
        }

        Text {
            id: cookingTimeText
            anchors.top: nameText.bottom
            anchors.topMargin: 5
            anchors.left: nameText.left
            color: "#333333"
            text: qsTr("Cooking Time:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 19
        }

        TextField {
            id: cookingTimeTextField
            anchors.verticalCenter: cookingTimeText.verticalCenter
            anchors.left: nameTextField.left
            width: 180
            height: 24
            anchors.verticalCenterOffset: 0
            inputMethodHints: 8
            KeyNavigation.tab: portionSizeTextField
            KeyNavigation.backtab: nameTextField
            KeyNavigation.down: portionSizeText
            KeyNavigation.up: nameTextField
        }

        Text {
            id: portionSizeText
            anchors.top: cookingTimeTextField.bottom
            anchors.topMargin: 5
            anchors.left: nameText.left
            color: "#333333"
            text: qsTr("Portion size:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 19
        }

        TextField {
            id: portionSizeTextField
            anchors.verticalCenter: portionSizeText.verticalCenter
            anchors.left: nameTextField.left
            width: 180
            height: 24
            anchors.verticalCenterOffset: 0
            inputMethodHints: 8
            KeyNavigation.tab: ingredientTextField
            KeyNavigation.backtab: portionSizeTextField
            KeyNavigation.down: ingredientTextField
            KeyNavigation.up: portionSizeTextField
        }

        Text {
            id: ingredientsText
            anchors.top: portionSizeText.bottom
            anchors.topMargin: 40
            anchors.left: nameText.left
            color: "#333333"
            text: qsTr("Ingredients:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 19
        }

        Text {
            id: ingredientText
            anchors.top: ingredientsText.bottom
            anchors.topMargin: verticalMargin
            anchors.left: ingredientsText.left
            anchors.leftMargin: 5
            color: "#333333"
            text: qsTr("Ingredient:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 14
        }

        TextField {
            id: ingredientTextField
            anchors.top: ingredientText.bottom
            anchors.topMargin: 5
            anchors.left: ingredientsText.left
            width: 180
            height: 24
            KeyNavigation.tab: ingredientAmountTextField
            KeyNavigation.right: ingredientAmountTextField
        }

        Text {
            id: amountText
            anchors.top: ingredientText.top
            anchors.left: ingredientAmountTextField.left
            anchors.leftMargin: 5
            color: "#333333"
            text: qsTr("Amount:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 14
        }

        TextField {
            id: ingredientAmountTextField
            anchors.top: ingredientTextField.top
            anchors.left: ingredientTextField.right
            anchors.leftMargin: 5
            width: 90
            height: 24
            KeyNavigation.backtab: ingredientTextField
            KeyNavigation.left: ingredientTextField
            KeyNavigation.tab: ingredientUnitTextField
            KeyNavigation.right: ingredientUnitTextField
        }

        Text {
            id: unitText
            anchors.top: ingredientText.top
            anchors.left: ingredientUnitTextField.left
            anchors.leftMargin: 5
            color: "#333333"
            text: qsTr("Unit:")
            styleColor: "#f5f5f5"
            style: Text.Outline
            font.bold: true
            font.pixelSize: 14
        }

        TextField {
            id: ingredientUnitTextField
            anchors.top: ingredientTextField.top
            anchors.left: ingredientAmountTextField.right
            anchors.leftMargin: 5
            width: 40
            height: 24
            KeyNavigation.backtab: ingredientAmountTextField
            KeyNavigation.left: ingredientAmountTextField
            KeyNavigation.tab: addIngredientButton
            KeyNavigation.right: addIngredientButton
            Keys.onSelectPressed: addIngredient()
            Keys.onEnterPressed: addIngredient()
            Keys.onReturnPressed: addIngredient()
        }

        Button {
            id: addIngredientButton
            anchors.verticalCenter: ingredientTextField.verticalCenter
            anchors.left: ingredientUnitTextField.right
            anchors.leftMargin: 5
            width: 90
            height: 30
            text: qsTr("Add")
            onClicked: {
                addIngredient();
            }
        }
    }


    Text {
        id: guideText
        anchors.top: basicInfoRect.top
        anchors.topMargin: verticalMargin
        anchors.right: addRecepieView.right
        anchors.rightMargin: guideTextField.width
        color: "#333333"
        text: qsTr("Guide:")
        styleColor: "#f5f5f5"
        style: Text.Outline
        font.bold: true
        font.pixelSize: 19
    }

    TextArea {
        id: guideTextField
        anchors.top: guideText.bottom
        anchors.left: guideText.left
        width: addRecepieView.width - 400 - 5*horizontalMargin
        height: addRecepieView.height - 3*verticalMargin - guideText.height - addRecipeToDBButton.height
        anchors.verticalCenterOffset: 0
        inputMethodHints: 8
    }

    ListView{
        id: ingredientsListView
        anchors.top: basicInfoRect.bottom
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 5
        width: parent.width / 2 - horizontalMargin*2
        height: parent.height - basicInfoRect.height - 2*verticalMargin
        model: ingredientsListModel
        spacing: verticalMargin
        highlightFollowsCurrentItem: true
        clip: true
        delegate: Rectangle{
            id: ingredientDelegate
            height: childrenRect.height
            Text {
                id: ingredientTextElement
                text: ingredient
            }
            Text {
                id: amountTextElement
                text: amount
                anchors.left: ingredientTextElement.right
                anchors.leftMargin: horizontalMargin
            }
            Text {
                id: unitTextElement
                text: unit
                anchors.left: amountTextElement.right
                anchors.leftMargin: 5
            }
            Button{
                id: removeIngredientButton
                anchors.left: unitTextElement.right
                anchors.leftMargin: horizontalMargin
                height: 30
                width: 30
                text: "X"
                onClicked: removeRecipeFromList(ingredientId)
            }
        }
    }

    Button{
       id: addRecipeToDBButton
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.bottom: parent.bottom
       anchors.bottomMargin: verticalMargin
       text: qsTr("Add recipe")
       onClicked: addRecipeToDB()
    }

    ListModel{
        id: ingredientsListModel
    }


    function addIngredient(){
        if( ingredientTextField.text != "" && ingredientAmountTextField.text != "" && ingredientUnitTextField.text != "" ){
            var date = new Date();
            var ingredientId = Math.random(date.getTime());
            console.log("ing id: " + ingredientId);
            ingredientsListModel.append({ "ingredientId": ingredientId, "ingredient": ingredientTextField.text, "amount": ingredientAmountTextField.text, "unit": ingredientUnitTextField.text });
            ingredientTextField.focus = true;
            ingredientTextField.text = "";
            ingredientAmountTextField.text = "";
            ingredientUnitTextField.text = "";
        }else{
            // No else.
        }
    }

    function removeRecipeFromList(ingredientId){
        console.log("remove: " + ingredientId);
        for(var i=0; i<ingredientsListModel.count; i++){
            console.log(ingredientsListModel.get(i).ingredientId);
            if(ingredientsListModel.get(i).ingredientId == ingredientId){
                console.log("found match: " + i + ", " + ingredientId);
                ingredientsListModel.remove(i);
            }
        }
    }

    function addRecipeToDB(){
        var name = nameTextField.text;
        var guide = guideTextField.text;
        var portionSize = portionSizeTextField.text;
        var cookingTime = cookingTimeTextField.text;
        var adder = "";
        DB.addRecipeToDB(ingredientsListModel, guide, name, adder, portionSize, cookingTime);
    }
}
